<template>
    <div>
        <nav class="mui-bar mui-bar-tab" style="position:stick; bottom:-1px">
            <a class="mui-tab-item mui-active" href="#tabbar" @click="toHome" id="Home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" href="#tabbar-with-chat" @click="toGoods" id="Goods">
                <span class="mui-icon mui-icon-list"></span>
                <span class="mui-tab-label">商品</span>
            </a>
            <a class="mui-tab-item" href="#tabbar-with-contact" @click="toCart" id="Cart">
                <span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
                <span class="mui-tab-label">购物车</span>
            </a>
            <a class="mui-tab-item" href="#tabbar-with-map" @click="toPeople" id="People">
                <span class="mui-icon mui-icon-contact"></span>
                <span class="mui-tab-label">个人中心</span>
            </a>
        </nav>
    </div>
</template>

<script>
import router from '../router';
export default {
    name: "HomeFooter",
    components: { router },
    methods:{
        toHome(){
            if(this.$route.path.split('/').pop()!='Home'){
                this.$router.push('Home')
            }
        },
        toGoods(){
            if(this.$route.path.split('/').pop()!='Goods'){
                this.$router.push('Goods')
            }
        },
        toCart(){
            if(this.$route.path.split('/').pop()!='Cart'){
                this.$router.push('Cart')
            }
        },
        toPeople(){
            if(this.$route.path.split('/').pop()!='People'){
                this.$router.push('People')
            }
        },
        footer_light_change(rt){
            var footer_list=['Home','Goods','Cart','People']
            var element=document.getElementById(rt)
            element.classList.add('mui-active')
            footer_list.splice(footer_list.indexOf(rt), 1)
            for(var i=0;i<3;i++){
                document.getElementById(footer_list[i]).classList.remove('mui-active')
            }
        }
    },
    mounted(){
        this.footer_light_change(this.$route.path.split('/').pop())
    }
}
</script>

<style scoped>
* {
    touch-action: none;
}
</style>